<template>
	<n-space vertical class="w100 p-r-20">
		<div class="w100">
			<n-tabs v-model:value="requestContentType" type="segment" size="small">
				<n-tab :name="0" tab="普通请求"> </n-tab>
				<n-tab :name="1" tab="SQL 请求"> </n-tab>
			</n-tabs>
		</div>
		<!-- 普通请求 -->
		<div v-show="requestContentType === 0">
			<n-tabs type="line" animated v-model:value="tabValue">
				<n-tab v-for="item in RequestParamsType" :key="item" :name="item" :tab="item"> {{ item }} </n-tab>
			</n-tabs>

			<!-- 各个页面 -->
			<div class="m-t-10">
				<div v-if="tabValue !== 'Body'">
					<request-header-table
						:target="requestParams?.[tabValue]"
						@update="updateRequestParams"
					></request-header-table>
				</div>

				<!-- 选择了 body -->
				<div v-else>
					<n-radio-group v-model:value="requestParamsBodyType" name="radiogroup">
						<n-space>
							<n-radio v-for="bodyEnum in RequestBody" :key="bodyEnum" :value="bodyEnum">
								{{ bodyEnum }}
							</n-radio>
						</n-space>
					</n-radio-group>

					<!-- 为 none 时 -->
					<n-card class="m-t-10" v-if="requestParamsBodyType === 'none'">
						<n-text depth="3">该接口没有 Body 体</n-text>
					</n-card>

					<!-- 具有对象属性时 -->
					<template
						v-else-if="requestParamsBodyType === 'form-data' || requestParamsBodyType === 'x-www-form-urlencoded'"
					>
						<request-header-table
							class="m-t-10"
							:target="requestParams['Body'][requestParamsBodyType]"
							@update="updateRequestBodyTable"
						/>
					</template>

					<!-- json  -->
					<template v-else-if="requestParamsBodyType === 'json'">
						<my-monaco-editor
							v-model:modelValue="requestParams['Body'][requestParamsBodyType]"
							width="100%"
							height="280px"
							language="json"
						/>
					</template>

					<!-- xml  -->
					<template v-else-if="requestParamsBodyType === 'xml'">
						<my-monaco-editor
							v-model:modelValue="requestParams['Body'][requestParamsBodyType]"
							width="100%"
							height="280px"
							language="html"
						/>
					</template>
				</div>
			</div>
		</div>
		<!-- SQL 请求 -->
		<div v-show="requestContentType === 1">
			<template v-if="requestHttpType === 'get'">
				<n-text>SQL 类型不支持 Get 请求，请使用其它方式</n-text>
			</template>
			<template v-else>
				<n-tag type="warning">需要后台提供专门处理 sql 的接口</n-tag>
				<my-monaco-editor v-model:modelValue="requestSQLContent.sql" width="100%" height="280px" language="sql" />
			</template>
		</div>
	</n-space>
</template>

<script setup>
import RequestHeaderTable from '../RequestHeaderTable/index.vue';

const RequestParamsType = ['Params', 'Body', 'Header'],
	RequestBody = ['none', 'form-data', 'x-www-form-urlencoded', 'json', 'xml'];

const props = defineProps({
	targetDataRequest: Object
});

const { requestHttpType, requestContentType, requestSQLContent, requestParams, requestParamsBodyType } = toRefs(
	props.targetDataRequest
);

const tabValue = ref('Params');

// 更新参数表格数据
const updateRequestParams = (paramsObj) => {
	if (tabValue.value !== 'Body') {
		requestParams.value[tabValue.value] = paramsObj;
	}
};

// 更新参数表格数据
const updateRequestBodyTable = (paramsObj) => {
	if (
		tabValue.value === 'Body' &&
		// 仅有两种类型有 body
		(requestParamsBodyType.value === 'form-data' || requestParamsBodyType.value === 'x-www-form-urlencoded')
	) {
		requestParams.value['Body'][requestParamsBodyType.value] = paramsObj;
	}
};
</script>

<style lang="scss" scoped>
.select-type {
	width: 300px;
}
</style>
